<template>
	<el-dialog v-model="show" destroy-on-close draggable title="编辑菜单" :width="dialogWidth">
		<el-form label-suffix="：" :model="menuItem" label-width="auto" label-position="right"
			style="background: #fafafa;padding: 15px 10px 6px 10px;border-radius: 5px;">
			<el-form-item label="菜单类型">
				<el-radio-group v-model="menuItem.type">
					<el-radio-button value="menu_group" label="菜单组"></el-radio-button>
					<el-radio-button value="route" label="页面路由"></el-radio-button>
					<el-radio-button value="auth" label="权限控制"></el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="上级">
				<el-cascader placeholder="请选择" :props="{ label: 'name', value: 'id', checkStrictly: true }"
					style="width: 220px;" v-model="menuItem.cascader_path" :options="_menusList" />
			</el-form-item>
			<el-form-item label="名称">
				<el-input v-model="menuItem.name" placeholder="请输入" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="排序">
				<el-input-number v-model="menuItem.sort" :precision="0" :min="1" :max="1000" style="width: 115px;" />
				<div class="form_item_desc" style="margin-left: 8px;">*数值越小越靠前</div>
			</el-form-item>
			<div v-if="menuItem.type != 'auth'">
				<el-form-item label="图标">
					<iconSelect @onChange="selectIconChange" :defaultValue="menuItem.icon"></iconSelect>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="menuItem.show">
						<el-radio :value="1" style="margin-right: 10px;">显示</el-radio>
						<el-radio :value="0">隐藏</el-radio>
					</el-radio-group>
				</el-form-item>
			</div>
			<div v-if="menuItem.type && menuItem.type != 'menu_group'" style="height: 50px;">
				<el-divider border-style="dashed" style="margin: 10px 0;" />
				<transition name="transition1">
					<el-form-item label="路由地址" v-if="menuItem.type == 'route'">
						<el-input v-model="menuItem.route_path" placeholder="菜单所指向的页面路由地址" style="width: 220px;" />
					</el-form-item>
				</transition>
				<transition name="transition1">
					<el-form-item label="权限标识" v-if="menuItem.type == 'auth'">
						<el-input v-model="menuItem.auth_tag" placeholder="控制dom节点的权限标识" style="width: 220px;" />
					</el-form-item>
				</transition>
			</div>
		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="show = false">关闭</el-button>
				<el-button icon="Check" type="primary" @click="save" :loading="saveLoading">
					保存
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus';
import { useMenusStore } from '../../../../stores/menus';
export default {
	props: {
		dialogWidth: {
			type: Number,
			default: 500
		},
		menusList: {
			type: Array,
			default: () => []
		}
	},
	watch: {
		show(a, b) {
			if (!a) {
				this.menuItem = JSON.parse(JSON.stringify(this.menuItemDefault))
			}
		}
	},
	created() {
		if (Object.keys(this.menuItem).length === 0) {
			this.menuItem = JSON.parse(JSON.stringify(this.menuItemDefault))
		}
	},
	computed: {
		valueLabel() {
			switch (this.menuItem.type) {
				case 'menu_group':
					return '路由地址'
					break;
				case 'auth':
					return '权限控制'
			}
		},
		_menusList() {
			return [
				{ name: "顶级", id: 0 },
				...this.menusList
			]
		},
		menusStore() {
			return useMenusStore()
		}
	},
	data() {
		return {
			show: false,
			menuItem: {},
			menuItemDefault: {
				show: 1, sort: 1
			},
			saveLoading: false
		}
	},
	methods: {
		selectIconChange(icon) {
			this.menuItem.icon = icon
		},
		save() {
			this.saveLoading = true
			this.menusStore.editMenuItem(this.menuItem).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				ElMessage.success(res.message)
				this.$emit('editSuccess')
				this.show = false
			}).catch(err => {
				ElMessage.error(`编辑失败,${err.message}`)
			}).finally(() => {
				this.saveLoading = false
			})
		}
	}
}
</script>

<style scoped lang="less">
/* 对移动中的元素应用的过渡 */
.transition1-enter-active,
.transition1-leave-active {
	transition: all 0.2s ease;
}

.transition1-enter-from,
.transition1-leave-to {
	opacity: 0;
	transform: translateY(10px);
}

.transition1-enter-active,
.transition1-leave-active {
	position: absolute;
}
</style>